<template>
  <div>
    <div v-show="isLoadings" class="d-lading">
      <el-button type="text" style="height:32px;" :loading="true"></el-button>
      <span style="color: #00a0de;line-height: 32px">获取数据中。。。</span>
    </div>
    <el-row v-show="!isLoadings" type="flex" justify="space-between">
      <el-col :span="7">
        <el-select style="width: 100%" v-model="params.pid" @change="changeProvinceId" placeholder="--省--"
                   no-data-text="无数据,请确保已选区域" clearable>
          <el-option v-for="item in pcdlist" :key="item.id"
                     :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-col>
      <el-col :span="7">
        <el-select style="width: 100%" v-model="params.cid"
                   @change="changeCity" placeholder="--市--" clearable>
          <el-option v-for="city in cityList" :key="city.id"
                     :label="city.name" :value="city.id"></el-option>
        </el-select>
      </el-col>
      <el-col :span="7">
        <el-select style="width: 100%" v-model="params.tid"
                   @change="changeRegionList" placeholder="--县--" clearable>
          <el-option v-for="county in regionList"
                     :key="county.id" :label="county.name"
                     :value="county.id"></el-option>
        </el-select>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        pcdlist: [], // 省id
        cityList: [], // 市id
        regionList: [], //县
        params: {
          pid: '',
          cid: '',
          tid: '',
          province: '',
          cityname: '',
          countyname: '',
        },
        isLoadings: false // 等待
      }
    },
    methods: {
      changeProvinceId(val) { // 切换省
        this.cityList = []
        this.regionList = []
        this.params.cid = ''
        this.params.tid = ''
        this.params.cityname = ''
        this.params.countyname = ''
        this.params.pid = val
        this.pcdlist.forEach((item, index) => {
          if (val == item.id) {
            this.cityList = item.cityList
            this.params.province = item.name
            return false
          }
        })
        this.$emit('lintenChildToCitys', this.params)
      },
      changeCity(val) { // 切换市
        this.regionList = []
        this.params.tid = ''
        this.params.countyname = ''
        this.params.cid = val
        this.cityList.forEach((item, index) => {
          if (val == item.id) {
            this.regionList = item.regionList
            this.params.cityname = item.name
            return false
          }
        })
        this.$emit('lintenChildToCitys', this.params)
      },
      changeRegionList(val) { // 切区
        this.params.tid = val
        this.regionList.forEach((item, index) => {
          if (val == item.id) {
            this.params.countyname = item.name
            return false
          }
        })
        this.$emit('lintenChildToCitys', this.params)
      },
      getProvinceCityDistrict() { // 获取三级联动数据
        this.isLoadings = true
        this.$http.get('/server/provinceCityDistrict/findProvinceCityDistrict').then(res => {
            if (res.data.success) {
              this.pcdlist = res.data.data
              if (this.pcdlist.length == 1) {
                this.params.pid = this.pcdlist[0].id
                this.params.province = this.pcdlist.name
                this.$set(this.$data, 'cityList', this.pcdlist[0].cityList)
                if (this.cityList.length == 1) {
                  this.params.cid = this.cityList[0].id
                  this.params.cityName = this.cityList[0].name
                  this.$set(this.$data, 'regionList', this.cityList[0].regionList)
                  if (this.regionList.length == 1) {
                    this.params.tid = this.regionList[0].id
                    this.params.countyName = this.regionList[0].name
                  }
                }
              }
            }
          }).finally(() => { this.isLoadings = false })
      },
    },
    mounted() {
      this.getProvinceCityDistrict()
    }
  }

</script>
<style scoped>
  .d-lading {
    position: relative;
    height: 40px;
    width: 100%;
    z-index: 25;
    background-color: rgba(255, 255, 255, .9);
    margin: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
</style>
